<template>
  <el-card shadow="always" :body-style="{ padding: '1.2rem' }">
    <div class="note">
      <TitleBar title="宁静致远" icon="fa fa-lightbulb-o"></TitleBar>
      <p>
        __画船听雨：你看得到我打在屏幕上的字，看不到我落在键盘上的泪。 Kali Linux：The quieter you
        become, the more you are able to hear.
        冰心：成功的花，人们只惊羡她现时的明艳！然而当初她的芽儿，浸透了奋斗的泪泉，洒遍了牺牲的血雨。
      </p>
      <TitleBar title="推荐文章" class="articleTitle" icon="fa fa-thumbs-o-up"></TitleBar>
      <div class="recommend-article-message">
        <h3>Termux 高级终端安装使用配置教程</h3>
        <p>
          Termux 高级终端安装使用配置教程，刚写这篇文章的时候，当时国内 Termux
          相关的文章和资料相对来说还是比较少的，就花了几天写了这一篇文章，没想到居然火了，
        </p>
        <RadiusButton style="margin-top: 1rem">阅读更多</RadiusButton>
      </div>
    </div>
  </el-card>
</template>

<script>
import TitleBar from "@/components/common/TitleBar.vue";
import RadiusButton from "@/components/common/RadiusButton.vue";
export default {
  data() {
    return {};
  },
  methods: {},
  components: {
    TitleBar,
    RadiusButton,
  },
};
</script>

<style scoped>
.note p {
  color: gray;
  text-align: center;
  width: 80%;
  margin: 0px auto;
  font-size: 1rem !important;
  opacity: 0.6;
  margin-top: 2%;
}

:deep() .title {
  font-size: 1.8rem;
  font-family: "Monaco", sans-serif !important;
  color: #34495e;
  font-weight: 700;
  line-height: 1.8rem;
}

:deep() #icon {
  font-size: 1.8rem;
  margin-right: 0.5rem;
  line-height: 1.8rem;
}

.articleTitle {
  margin-top: 3%;
}
.recommend-article-message {
  width: 80%;
  border-radius: 8px;
  background-color: rgba(105, 6, 129, 0.712);
  margin: 1rem auto;
  height: 20rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.recommend-article-message h3 {
  font-weight: bold;
  font-size: 1.6rem;
  color: white;
  margin: 0.5rem;
  text-align: center;
}
.recommend-article-message p {
  max-lines: 3;
  border-block: start;
  color: white;
}
</style>
